<template>
  <div>
    <div class="box" id="item">
      <div ref="pdf" class="itemBox">
        <div class="question">
          <el-form ref="form" label-position="top">
            <el-row :gutter="20">
              <el-col
                v-for="(item, index) in form.list"
                :key="item.id + item.content"
                :span="item.type == 1 ? 12 : 24"
                :xs="24"
              >
                <div class="title1" v-if="item.type == 7">{{ item.content }}</div>
                <div class="title2" v-else-if="item.type == 6">{{ item.content }}</div>
                <el-form-item
                  :required="item.is_required == 1"
                  v-else
                  :label="item.content"
                >
                  <div v-if="item.type == 1">
                    <el-input
                      :disabled="item.content == '企业名称' || read"
                      :placeholder="item.tip"
                      v-model="item.value"
                    ></el-input>
                  </div>
                  <div v-else-if="item.type == 2">
                    <el-input
                      :disabled="read"
                      type="textarea"
                      v-model="item.value"
                    ></el-input>
                  </div>
                  <div v-else-if="item.type == 3">
                    <el-radio-group v-model="item.value" :disabled="read">
                      <el-radio
                        v-for="item_ in item.option"
                        :key="item_.value + index"
                        :label="item_.value"
                        >{{ item_.label }}</el-radio
                      >
                    </el-radio-group>
                  </div>
                  <div v-else-if="item.type == 4">
                    <el-checkbox-group v-model="item.value" :disabled="read">
                      <el-checkbox
                        v-for="item_ in item.option"
                        :key="item_.value + index"
                        :label="item_.value"
                        >{{ item_.label }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </div>

                  <div v-else-if="item.type == 8">
                    <el-upload
                      :disabled="read"
                      :class="{ hide: hideUpload }"
                      :action="action"
                      :limit="1"
                      :file-list="fileList"
                      :before-upload="beforeAlbumUpload"
                      :on-success="onSuccess"
                      list-type="picture-card"
                    >
                      <div slot="default" style="width: 100%; height: 100%">
                        <img
                          style="width: 100%; height: 100%; object-fit: cover"
                          src="@/assets/web/card2.png"
                        />
                      </div>
                      <div
                        slot="file"
                        slot-scope="{ file }"
                        v-loading="file.status == 'uploading'"
                      >
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url"
                          alt=""
                        />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!read"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </div>

                  <div v-else-if="item.type == 9">
                    <div v-html="item.value"></div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { htmlPdf } from "@/utils/pdf.js";
import {
  saveQuestion,
  getBusinessCardInfo,
  questionInfo,
  questionLabel,
} from "@/api/configApi";
export default {
  props: {
    answer_id: {
      type: String,
    },
    read: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    answer_id: {
      handler(newVal, oldVal) {
        if (newVal) {
          questionInfo({
            answer_id: newVal,
            read: this.read ? 1 : "",
          }).then((res) => {
            console.log(res, "问卷题目");
            this.form = res;

            if (res.list[1].value) {
              this.hideUpload = true;
              let obj = {
                name: "",
                url: res.list[1].value,
              };
              this.fileList.push(obj);
            }
          });

          questionLabel().then((res) => {
            this.serveDemandTag = res;
            console.log(res, "企业标签");
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      form: {},
      serveDemandTag: {},
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      serveId: [],
      hideUpload: "",
      fileList: [],
      action: `https://patent.shundeip.com/v1/common/file`,
      demandId: [],
    };
  },
  mounted() {},
  computed: {},
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file) {
      this.hideUpload = false;
      // 1.获取将要删除图片的临时路径
      const filePath = file.url;
      // 2.从pics数组中，找到图片对应的索引值
      const i = this.fileList.findIndex((x) => x.url === filePath);
      // 3.调用splice方法，移除图片信息
      this.fileList.splice(i, 1);
    },
    beforeAlbumUpload(file) {
      //上传前验证
      const isIMG = file.type.slice(0, 5) === "image";
      if (!isIMG) {
        this.$message.error("请上传图片!");
      }
      return isIMG;
    },

    onSuccess(response, file, fileList) {
      this.hideUpload = true;

      this.fileList = [fileList[0].response.data];
      getBusinessCardInfo({
        file_path: response.data.url,
      }).then((res) => {
        this.form.list.map((res_, index) => {
          if (res_.content == "通讯地址") {
            this.form.list[index].value = res.address;
          } else if (res_.content == "联系人") {
            this.form.list[index].value = res.name;
          } else if (res_.content == "职位") {
            this.form.list[index].value = res.position;
          } else if (res_.content == "联系电话") {
            this.form.list[index].value = res.phone;
          } else if (res_.content == "电子邮箱") {
            this.form.list[index].value = res.email;
          }
        });

        this.$message({
          message: "上传成功",
          type: "success",
        });
      });
      this.form.list[1].value = this.fileList[0].url;
    },

    loadPdf() {
      // downloadPDF(this.$refs.pdf);
      htmlPdf("企业知识产权调研问卷", this.$refs.pdf);
    },

    submit(status) {
      let form = {
        answer_id: this.answer_id,
        status: status,
        business_card: this.fileList[0] ? this.fileList[0].url : "",
        address: this.form.list[3].value,
        area: this.form.list[8].value,
        product: this.form.list[9].value,
        output: this.form.list[10].value,
        scale: this.form.list[11].value,
        username: this.form.list[4].value,
        position: this.form.list[5].value,
        mobile: this.form.list[6].value,
        email: this.form.list[7].value,
        content: [],
        service_tag: "",
        three_tag: "",

        demand_tag: "",
        four_tag: "",
        five_tag: "",
      };

      let requiredType = true;
      this.form.list.map((res) => {
        if (res.is_required == 1) {
          if (!res.value) {
            requiredType = false;
          }
        }

        if (res.id) {
          let obj = {
            id: "",
            value: "",
          };
          obj.id = res.id;
          if (res.type == 4) {
            obj.value = res.value.join(",");
          } else {
            obj.value = res.value;
          }
          form.content.push(obj);
        }

        if (res.is_have == 55) {
          res.value.map((res_) => {
            if (form.service_tag) {
              form.service_tag += "," + res_;
            } else {
              form.service_tag += res_;
            }
          });
        }

        if (res.is_have == 66) {
          res.value.map((res_) => {
            if (form.three_tag) {
              form.three_tag += "," + res_;
            } else {
              form.three_tag += res_;
            }
          });
        }

        if (res.is_have == 44) {
          res.value.map((res_) => {
            if (form.demand_tag) {
              form.demand_tag += "," + res_;
            } else {
              form.demand_tag += res_;
            }
          });
        }

        if (res.is_have == 22) {
          form.four_tag = res.value;
        }

        if (res.is_have == 33) {
          form.five_tag = res.value;
        }
      });

      if (!requiredType && status == 2) {
        this.$message({
          message: "请完善必填信息",
          type: "warning",
        });
        return;
      }

      saveQuestion(form).then((res) => {
        this.$message({
          message: "提交成功",
          type: "success",
        });
        this.$emit("upData");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__container .el-descriptions-item__content {
  flex-wrap: wrap;
}
::v-deep .el-form-item .el-form-item__label {
  width: initial !important;
}
::v-deep .el-upload--picture-card {
  width: 335px;
  height: 200px;
}
::v-deep .hide .el-upload--picture-card {
  display: none;
}

::v-deep .el-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .el-checkbox__label {
    white-space: normal;
    word-break: break-all;
  }
}
// .operate {
//   display: flex;
//   justify-content: flex-end;
// }

.questionnaireBox {
  margin: 20px 0;
  display: flex;
  .text {
    color: #387dff;
    font-size: 18px;
    cursor: pointer;
  }
  button {
    padding: 5px 30px;
    width: 139px;
    height: 40px;
    border-radius: 19px;
    font-size: 14px;
  }
  .btn1 {
    background: #ecf5ff;
    color: #387dff;
    border: 1px solid #387dff;
  }
  .btn2 {
    background: #387dff;
    border: 1px solid #e8ecef;
  }
}

.box {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  .itemBox {
    max-width: 750px;
    // position: relative;
    .title1 {
      font-size: 22px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30px;
    }
    .title2 {
      margin: 30px 0 20px 0;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
    }

    .question {
      background-color: #f5f6fa;
      padding: 55px 30px 75px 30px;
      border-radius: 10px;
      margin: 10px 0;
      // height: 80vh;
      // overflow: scroll;
      // overflow-x: hidden;
      .title_ {
        font-size: 14px;
        border-bottom: 1px solid #d5d7da;
        padding-bottom: 15px;
        font-weight: bold;
      }
      .saveBox {
        // position: fixed;
        // bottom: 0;
        // right: 0;
        // left: 0;
        height: 200px;
        background-color: #fff;
        z-index: 9;
        box-shadow: 0 2px 34px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
}
@media (max-width: 768px) {
  ::v-deep .el-upload--picture-card {
    width: 100%;
    height: 320px;
  }
  .box {
    .itemBox {
      width: 100%;
    }
  }
}
</style>
